<template>
  <a-card class="content-card" :loading="false" title="我的脚本">
    <a-button slot="extra" icon="redo" @click="getMyScriptListData">刷新脚本</a-button>
    <div class="list">
      <a-list
        item-layout="horizontal"
        :data-source="myScriptListData"
        :loading="myScriptListLoading"
        bordered
      >
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a-list-item-meta :description="item.scriptDesc">
            <a slot="title">{{ item.scriptName }}</a>
            <a-switch
              slot="avatar"
              v-model="item.status == '0'"
              @change="changeMyScriptStatus(item)"
            />
          </a-list-item-meta>

          <a-dropdown slot="actions">
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
              操作
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>编辑脚本</a-menu-item>
              <a-menu-item style="color:#f00">删除脚本</a-menu-item>
            </a-menu>
          </a-dropdown>
        </a-list-item>
      </a-list>
      <a-pagination simple :default-current="1" :total="20" />
    </div>
  </a-card>
</template>

<script>
import { getMyScripts, changeStatus } from '@/api/request/user.js'
import { Success_, Warning_ } from '@/utils/message.js'
export default {
  data () {
    return {
      myScriptListData: [],
      myScriptListLoading: false,
    }
  },
  created () {
    this.getMyScriptListData()
  },
  methods: {
    getMyScriptListData () {
      this.myScriptListLoading = true
      getMyScripts().then(res => {
        this.myScriptListData = res.data
        this.myScriptListLoading = false

      })
    },
    changeMyScriptStatus (item) {
      const status = item.status == '0' ? '1' : '0'
      console.log(item);
      changeStatus(item.id, status).then(res => {
        if (res.code == 200) {
          Success_(this)
        } else {
          Warning_(this)
        }
        this.getMyScriptListData()
      })
    }
  },
}
</script>

<style scope>
.list .ant-list {
  height: 362px;
  margin-bottom: 10px;
}
.ant-list-item-meta-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 200px;
}
.ant-list-item-meta-avatar {
  line-height: 54px;
  margin: auto 20px 10px 0px;
}
.ant-spin,
.ant-spin-nested-loading {
  height: 362px;
}
</style>